import React, { useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';
import { get } from '../http/http';

const ReserveScreen = () => {
  const [week, setWeek] = useState(0);
  const [data, setData] = useState({ currentDay: '', tableData: [], weekList: [] });
  const navigation = useNavigation();
  const route = useRoute();
  const { classroomId } = route.params;

  useEffect(() => {
    const loadData = async () => {
      try {
        const response = await get('/curriculum/curriculumStudy/api/getBackCourseScheduleByWeek', {
          classroomId, week,
        });
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    };
    loadData();
  }, [week, classroomId]);



  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Button title="上一周" onPress={() => setWeek(week - 1)} />
        <Text style={styles.currentDay}>{data.currentDay}</Text>
        <Button title="下一周" onPress={() => setWeek(week + 1)} />
      </View>
      <View style={styles.table}>
        <View style={styles.column}>
          <View style={styles.cellHeader}>
            <Text style={styles.headerText}>时间</Text>
          </View>
          {data.tableData.map((item, index) => (
            <View key={index} style={styles.cell}>
              <Text>{item.startTime} - {item.endTime}</Text>
            </View>
          ))}
        </View>
        {data.weekList.map((item, index) => (
          <View key={index} style={styles.column}>
            <View style={styles.cellHeader}>
              <Text style={styles.headerText}>{item.time}{'\n'}{item.week}</Text>
            </View>
            {data.tableData.map((d, i) => (
              <View key={i + index * 20} style={styles.cell}>
                {d[[d.monday, d.tuesday, d.wednesday, d.thursday, d.friday, d.saturday, d.sunday][index].isHas] ? (
                  <View style={styles.cellContentBlue}>
                    <Text>{d.teacherName}</Text>
                  </View>
                ) : new Date().getTime() > new Date(item.date + ' ' + d.startTime).getTime() ? (
                  <View style={styles.cellContentGray} />
                ) : (
                  <View style={styles.cellContentOrange} />
                )}
              </View>
            ))}
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F7F8F8',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
  currentDay: {
    flex: 2,
    textAlign: 'center',
  },
  table: {
    flexDirection: 'row',
    borderRadius: 20,
    padding: '2%',
  },
  column: {
    flexDirection: 'column',
    flex: 1,
  },
  cellHeader: {
    backgroundColor: '#008080',
    height: 80,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  headerText: {
    color: 'white',
  },
  cell: {
    backgroundColor: 'white',
    height: 80,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  cellContentBlue: {
    backgroundColor: 'rgb(0, 153, 255)',
    width: '90%',
    flex: 1,
    margin: '5%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cellContentGray: {
    backgroundColor: 'gray',
    width: '90%',
    flex: 1,
    margin: '5%',
  },
  cellContentOrange: {
    backgroundColor: 'orange',
    width: '90%',
    flex: 1,
    margin: '5%',
  },
});

export default ReserveScreen;
